<template>
    <div class="box2">
        <b>订单号：</b>
        <b style="color:red" class="dindan">{{ detail?.order_id }}</b>
        <b>应付金额:
            <b style="color:red">{{ detail?.total_fee }}</b>
        </b>

    </div>
    <div class="box">
        <h1>
            <svg class="icon" style="font-size:26px" aria-hidden="true">
                <use xlink:href="#icon-wechat_pay"></use>
            </svg>
            微信支付
        </h1>
        <!-- 二维码 -->
        <div class="box3" v-loading="qrLoading">
            <img class="erweima" :src="qrsrc" width="200" height="200" alt="">
        </div>
        <div class="box4">
            <svg class="icon weixin" aria-hidden="true">
                <use xlink:href="#icon-weixin1"></use>
            </svg>
            <b>微信扫码付款</b>
        </div>
        <img class="saoyisao" src="../../../../../src/assets/image/7.png" alt="">
        <div class="box1">
            <el-descriptions title="订单信息">
                <el-descriptions-item label="创建时间">{{ detail?.create_time }}</el-descriptions-item>
                <el-descriptions-item label="用户名">{{ detail?.user_nickname }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ detail?.user_phone }}</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{ detail?.orderDetail[0].productName }}</el-descriptions-item>
                <el-descriptions-item label="产品描述">{{ detail?.orderDetail[0].description }}</el-descriptions-item>
                <el-descriptions-item label="收件地址">{{ detail?.address }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>
<script setup>
import { ElMessage } from 'element-plus';
import * as api from "@/api/vip"
import { useRoute, useRouter } from 'vue-router';
import { onUnmounted, ref, onMounted } from 'vue';
// 引入生产二维码
import qr from "qrcode";
let route = useRoute()
let router = useRouter()
// 声明一个定时器
let timeout = null


// 1.发起请求，根据query传来的order_id，获取订单详情
let { order_id } = route.query

// 声明响应式变量存储订单详情
let detail = ref()
// 一个响应式变量储存二维码地址
let qrsrc = ref()
// 一个二维码展示的加载动画
let qrLoading = ref(false)
let getOrder = async () => {
    qrLoading.value = true
    try {
        let res = await api.getOrderApi(order_id)
        // 查看订单状态 ，订单状态为1时才能发起支付
        // 获取订单状态 进行判断
        // console.log(res);
        let { order_status } = res.data.data[0]
        // console.log(order_status);
        detail.value = res.data.data[0]
        // 如果没有订单ID
        if (!order_id) {
            ElMessage({
                type: "error",
                message: "没有获取到订单id,2秒后将跳转至充值页面"
            })
        }
        if (order_status === 1) {
            // 先本地查询有没有发起这个支付
            let code_url = localStorage.getItem(order_id)
            if (code_url) { //已经发起支付，但没付款
                // 用 qrcode 将支付地址变成二维码
                qr.toDataURL(code_url,(err,url)=>{
                    // console.log(url);
                    if(err){
                        ElMessage.error(err.toString())
                        return 
                    }
                    qrsrc.value = url
                    qrLoading.value = false
                })
            } else {
                // 这样才能支付
                try {
                    let res = await api.paymentApi(order_id)
                    // console.log(res);
                    // 同一个订单不能频繁发起支付，所以用订单ID作为Key,支付返回的支付地址作为值，放到本地存储

                    localStorage.setItem(order_id, res.data.code_url)
                    qr.toDataURL(res.data.code_url,(err,url)=>{
                    // console.log(url);
                    if(err){
                        ElMessage.error(err.toString())
                        return 
                    }
                    qrsrc.value = url
                    qrLoading.value = false
                })
                } catch (e) {
                    console.log(e);
                }
            }

        } else {
            switch (order_status) {
                case 0:
                    ElMessage({
                        type: "error",
                        message: "订单未提交,2秒回返回充值页面"
                    })
                    break;
                case 2:
                    ElMessage({
                        type: "error",
                        message: "订单已取消,2秒回返回充值页面"
                    })
                    break
                case 3:
                    ElMessage({
                        type: "error",
                        message: "订单无效,2秒回返回充值页面"
                    })
                    break
                case 4:
                    ElMessage({
                        type: "error",
                        message: "交易关闭,2秒回返回充值页面"
                    })
            }
            timeout = setTimeout(() => {
                router.push("/manage/pay")
            }, 2000)
        }
    } catch (e) {
        console.log(e);
    }
}
onMounted(() => {
    getOrder()
})
// 2.发起支付，提交订单ID，后台会返回支付地址
// 3.需要将支付地址转换为二维码

// 使用ajax轮询的方法，查询支付状态
let poling = () => {
    let interval = setInterval(async ()=>{
      let res =   await api.queryApi(order_id)    
    
      if(res.data.state){
        //支付成功，跳转到成功页面
        router.push("/pay/paySuccess")
        localStorage.removeItem(order_id)
      }
    },2000)
    return interval
}

let interval = poling()

// 当页面卸载时，清除定时器
onUnmounted(() => {
    if (timeout) {
        clearTimeout(timeout)
    }
    clearInterval(interval)
})


</script>

<style lang="less" scoped>
span {
    font-size: 12px;
    color: aliceblue;
}

.dindan {
    position: relative;
    right: 335px;
}


.saoyisao {
    width: 200px;
    height: 250px;
    position: absolute;
    right: 250px;
}

.el-descriptions {
    margin-top: 30px;
}

.box2 {
    margin-top: 26px;
    width: 1100px;
    display: flex;
    justify-content: space-between;
}

.box3 {
    width: 200px;
    height: 200px;
    // border: 1px solid;
    position: absolute;
    left: 300px;
}

.box4 {
    width: 200px;
    height: 30px;
    border: 1px solid;
    position: absolute;
    left: 300px;
    top: 280px;
    background: linear-gradient(135deg, #4c67ff, #5635df);

    b {
        position: relative;
        top: 4px;
        right: 40px;
        color: aliceblue;
        font-size: 12px;
    }
}

.box {
    width: 1100px;
    height: 450px;
    // border: 1px solid;
    margin-top: 20px;
    position: relative;
    box-shadow: 4px 4px 15px 4px blue;
    border-radius: 6px;
    overflow: hidden;
}

.icon {
    vertical-align: middle;
    margin-left: 100px;
}

.weixin {
    font-size: 22px;
    vertical-align: middle;
    position: relative;
    top: 4px;
    right: 50px;
}

.box1 {
    width: 1100px;
    height: 150px;
    margin-left: 20px;
    position: absolute;
    bottom: 0;
}
</style>